import { defineComponent, ref } from "vue";
import CardView from "@/components/CardView";
import Text from "@/components/Text";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ListView from "@/components/ListView";
import ButtonGroupView from "@/components/ButtonGroupView";
import { Divider } from "vant";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import { useRequest } from "./request";
import { getUserInfoUrl, phoneNumControl } from "@/command/apiTool";
import IconText from "@/components/IconText";
import time from "@/assets/image/time.png";
import PageTitle from "@/components/PageTitle";
import BackGroundImage from "@/components/BackGroundImage";
import InfoCellGray from "@/components/InfoCellGray";
import TextView from "@/components/TextView";
import { useRouter } from "vue-router";
import MessageCard from "@/components/MessageCard";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import { ITextGroupPropsData } from "@/components/TextGroups/types";

export default defineComponent({
  name: "",
  setup() {
    const form = ref({});
    const router = useRouter();
    const { newInfoList, applicationRecord } = useRequest();
    const renderRecord = () => {
      return (
        <div class={"px-[10px] pb-[10px]"}>
          <CardView
            title="申请记录"
            // right={() => <div class="blue-text">更多</div>}
          >
            {applicationRecord.value!.slice(0, 3).map((e: any) => {
              return (
                <div class={"flex items-center justify-between"}>
                  <Text class={"!text-[#333333] text-[16px]"}>
                    {e.productName}
                  </Text>
                  <Text class={"text-[#999999] text-[16px]"}>{e.time}</Text>
                </div>
              );
            })}
          </CardView>
        </div>
      );
    };
    const render1 = () => {
      const messages = newInfoList.value.map((e: any) => {
        let maskedPhoneNumber = phoneNumControl(e.phone);
        return {
          text: `用户${maskedPhoneNumber}通过平台成功向结队大户...`,
          time: e.beforeTime,
        };
      });
      return (
        <BackGroundImage>
          <MessageCard data={messages} />
        </BackGroundImage>
      );
    };
    const renderItem = (e: any) => {
      const buttons: IButtonGroupViewData[] = [
        {
          text: "去申请",
          type: "primary",
          plain: true,
          onClick: () => {
            router.push(`/appointmentApplication?id=${e.id}`);
          },
        },
      ];
      const data: ITextGroupPropsData[] = [
        {
          name: "检测设备",
          value: e.equipmentName,
          width: "100%",
        },
        {
          name: "能检农产",
          value: e.productTypeName,
          width: "100%",
        },
      ];
      return (
        <div
          class={"w-full"}
          onClick={() => router.push(`/detectionDhDetail?id=${e.id}`)}
        >
          <InfoCellGray
            {...{
              labels:
                e.teamFlag == "1"
                  ? [
                      {
                        name: "结队大户",
                        type: "tag",
                      },
                    ]
                  : undefined,
              data: data,
              title: e.entityName,
              src: e.logo,
            }}
          >
            <TextView limitedNumber={1}>{e.address}</TextView>
            <ButtonGroupView
              data={buttons}
              class={"flex !justify-end w-[130px] max-sm:w-[170px]"}
            />
          </InfoCellGray>
          <Divider />
        </div>
      );
    };
    const render2 = () => {
      const data: IFilterMenuChoose[] = [
        { type: "area", key: "code" },
        { type: "productType", key: "productTypeId", title: "农产类型" },
        { type: "datePicker", key: "time", title: "日期" },
        // { type: "calendar", key: "time", keys: ["startDate", "endDate"] },
        // { type: "field", key: "areaCode" },
        // {
        //   comType: "single",
        //   key: "areaCode",
        //   data: [{ label: "测试", value: "1" }],
        // },
      ];
      return (
        <CardView title={"大户列表"}>
          <FilterMenuSearch
            choose={data}
            v-model={form.value}
            searchKey="name"
          />
          <ListView
            {...getUserInfoUrl(
              {
                dh: "",
                xh: "/api/h5/richInspection/small/leadInfo",
              },
              form.value
            )}
            type="page"
            params={form.value}
            renderItem={renderItem}
          />
        </CardView>
      );
    };

    return () => {
      return (
        <PageTitle
          title="帮检测"
          right={() => (
            <IconText
              url={time}
              text="检测记录"
              class="header-right"
              onClick={() => router.push("/detectionRecord")}
            />
          )}
        >
          {render1()}
          {renderRecord()}
          {render2()}
        </PageTitle>
      );
    };
  },
});
